<template>
	<!-- 单行文本控件 -->
	<div class="CompTexter" :style="{ width: compWidth_ }">
		<!-- 标签 -->
		<div
			v-show="label_"
			ref="label"
			class="nosel label"
			:class="{ [border_]: true }"
			:style="{ width: labelWidth_, textAlign: labelAlign_ }"
			@click="onClickLabel"
		>
			{{ label_ }}
		</div>
		<!-- 输入框 -->
		<div
			class="valueBox"
			:class="{ inva: !right, readonly: readonly_, [border_]: true, noPadding: hider_.cellPadding }"
		>
			<input
				ref="value"
				class="inline value"
				:class="{ inva: !right }"
				:style="{ width: valueWidth_, textAlign: textAlign_ }"
				:placeholder="place"
				:tabindex="~~tab"
				:value="value"
				:type="type_"
				:readonly="readonly_"
				@mouseenter="onMouseEnterValue"
				@input="onInput($event.target.value)"
			/>
			<!-- 操作按钮 -->
			<Fa v-if="!hider_.oper && !readonly_"
				class="inline oper"
				:icon="value !== '' && value !== undefined && value !== null ? ['fas', 'eraser'] : ['fas', 'pencil-alt']"
				@click="onClear"
			/>
		</div>
	</div>
</template>

<script>
	import { proper, computer, methoder } from './_public';

	let typeDict = {
		text: 'text',
		pass: 'password',
	};

	export default {
		props: {
			...proper,

			// 特有属性
			// 输入框类型
			type: {
				type: String,
				default: 'text'
			},
			// 输入框类型
			fontSize: {
				type: [Number, String],
				default: '1rem'
			},
		},
		data() {
			return {
			};
		},

		computed: {
			...computer,

			// 类型封装
			type_() {
				return typeDict[this.type] || typeDict.text;
			},

			fontSize_() {
				return U.toCssLen(this.fontSize);
			},
		},
		watch: {
			// 触发修改后事件
			value(now) {
				this.onAfterInput(now);
			},
		},

		mounted() {
			// 挂载时也进行触发一次修改后事件
			this.onAfterInput(this.value, true);
		},

		methods: {
			...methoder,

			// 文本全选
			selectAll() {
				this.$refs.value.focus();
				this.$refs.value.select();
			},

			onInput(now) {
				this.$emit('input', now);
			},
			onClear() {
				this.$emit('input', '');
			},

			// 鼠标进入且只读, 全选
			onMouseEnterValue() {
				if(this.readonly_) {
					this.selectAll();
				}
			},
			// 单击标签时, 只读全选
			onClickLabel() {
				if(this.readonly_) {
					this.selectAll();
				}
			},
		},
	};
</script>

<style lang="sass" scoped>
.CompTexter
	position: relative

	height: 100%

	overflow: hidden

	white-space: nowrap
	text-overflow: ellipsis
	letter-spacing: -1rem

.label
	position: relative
	box-sizing: border-box

	float: left

	width: auto
	height: 100%

	border-color: transparent

	overflow: hidden

	cursor: pointer

	letter-spacing: initial

.valueBox
	position: relative
	box-sizing: border-box

	padding: 0px 5px

	width: auto
	height: 100%

	overflow: hidden

	border-color: steelblue

	letter-spacing: -1rem

	cursor: pointer


	&:not(.readonly):hover
		border-color: #60aff1


	&.readonly
		cursor: text


	&.noPadding
		padding: 0rem

.inva
	color: #f44336
	border-color: #f44336

.value
	position: relative

	height: 100%

	margin: 0rem
	padding: 0rem
	border: 0rem
	outline: none

	overflow: hidden

	background: transparent

	color: inherit
	font-size: inherit
	letter-spacing: initial

.oper
	position: relative

	width: 15px
	height: 100%

	padding-left: 5px

	color: #e4e4e4

	cursor: pointer

	.valueBox:hover &
		color: white
</style>